<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button icon="el-icon-plus" type="primary" size="small" @click="dialogVisible = true;edit = false">添加进程</el-button>
      <el-table size="small" :data="list" :header-cell-style="{background:'#f2f2f2'}" class="mt20">
        <el-table-column align="center" label="ID" prop="id"></el-table-column>
        <el-table-column align="center" label="进程名称" prop="title"></el-table-column>
        <el-table-column align="center" label="进程命令" prop="command"></el-table-column>
        <el-table-column align="center" label="进程频率/s" prop="interval"></el-table-column>
        <el-table-column align="center" label="当前状态">
          <template slot-scope="scope">
           {{ scope.row.status === 100 ? '未启动' : scope.row.status === 200 ? '运行中' : scope.row.status === -100 ? '运行失败' : '数据获取失败' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="最后一次启动时间" prop="last_start_at"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button style="margin-left:0;margin-right:10px;margin-bottom:10px;" size="small" type="success" icon="el-icon-check" @click="handleToggoleState(scope.row.id, scope.$index, 'start')" v-if="scope.row.status === -100 || scope.row.status === 100"></el-button>
            <el-button style="margin-left:0;margin-right:10px;margin-bottom:10px;" size="small" type="warning" icon="el-icon-close" @click="handleToggoleState(scope.row.id, scope.$index, 'stop')" v-if="scope.row.status === 200"></el-button>
            <el-button style="margin-left:0;margin-right:10px;margin-bottom:10px;" size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.id)"></el-button>
            <el-button style="margin-left:0;margin-right:10px;margin-bottom:10px;" size="small" type="danger" icon="el-icon-delete" @click="handleDelte(scope.row.id)"></el-button>
            <el-button style="margin-left:0;margin-right:10px;margin-bottom:10px;" size="small" type="info" icon="el-icon-info" @click="handleClickInfo(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :page-size="page.size" :total="page.total" :current-page.sync="page.current" layout="total, prev, pager, next" class="fr mt20" @current-change="handleCurrentChange"></el-pagination>
      <el-dialog title="进程配置" :visible.sync="dialogVisible" width="30%" @close="handleInitDialog">
        <el-form :model="add" label-width="80px" :rules="rules" ref="dialogForm" size="small">
          <el-form-item label="进程名称" prop="name">
            <el-input v-model="add.name" placeholder="请输入进程名称"></el-input>
          </el-form-item>
          <el-form-item label="进程描述" prop="desc">
            <el-input v-model="add.desc" placeholder="请填写进程描述"></el-input>
          </el-form-item>
          <el-form-item label="进程命令" prop="cmd">
            <el-input v-model="add.cmd" placeholder="命令不可包含空格"></el-input>
          </el-form-item>
          <el-form-item label="命令参数">
            <el-input v-model="add.arguments" placeholder="多个参数以逗号分割"></el-input>
          </el-form-item>
          <el-form-item label="进程频率" prop="intval">
            <el-input v-model.number="add.intval" placeholder="请设置进程频率/s"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="primary" @click="handleSubMit">确认配置</el-button>
        </div>
      </el-dialog>
      <el-dialog title="进程详情" :visible.sync="dialogInfo">
        <el-form :model="info" class="clearfix">
          <el-col :span="12">
            <el-form-item label="进程名称："><span style="font-size:12px">{{ info.title }}</span></el-form-item>
            <el-form-item label="进程描述："><span style="font-size:12px">{{ info.desc }}</span></el-form-item>
            <el-form-item label="进程状态："><span style="font-size:12px">{{ info.status === 100 ? '未启动' : info.status === 200 ? '运行中' : info.status === -100 ? '运行失败' : '数据获取失败' }}</span></el-form-item>
            <el-form-item label="进程命令："><span style="font-size:12px">{{ info.command }}</span></el-form-item>
            <el-form-item label="命令参数："><span style="font-size:12px">{{ info.arguments }}</span></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="进程频率："><span style="font-size:12px">{{ info.interval }}</span></el-form-item>
            <el-form-item label="创建时间："><span style="font-size:12px">{{ info.create_at }}</span></el-form-item>
            <el-form-item label="最后启动时间："><span style="font-size:12px">{{ info.last_start_at }}</span></el-form-item>
            <el-form-item label="错误信息："><span style="font-size:12px">{{ info.error_info }}</span></el-form-item>
          </el-col>
        </el-form>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { handleSystemInit, processAdd, processEdit, processEditGet, processPage, processDelete, processToggle, processInfo } from '@/api/setting'

export default {
  name: 'systemIndex',
  components: {
    Breadcrumb
  },
  data() {
    return {
      page: {
        size: 1,
        current: 1,
        total: 0
      },
      add: {
        name: '',
        arguments: '',
        desc: '',
        cmd: '',
        intval: ''
      },
      info: {
        arguments: '',
        command: '',
        desc: '',
        error_info: '',
        interval: '',
        last_start_at: '',
        status: '',
        title: '',
        create_at: ''
      },
      id: '', // This is list Row id
      rules: {
        name: [{ required: true, trigger: 'blur', message: '不能为空哦~' }],
        desc: [{ required: true, trigger: 'blur', message: '不能为空哦~' }],
        cmd: [{ required: true, trigger: 'blur', message: '不能为空哦~' }],
        intval: [{ required: true, type: 'number', trigger: 'blur', message: '哎呀，格式不对哟~' }]
      },
      list: [],
      dialogVisible: false,
      edit: false,
      dialogInfo: false
    }
  },
  methods: {
    init() {
      handleSystemInit().then(response => {
        if (response.data.errorCode === 0) {
          const items = response.data.result.process.data
          this.list = items.map(v => {
            return v
          })
          this.page.total = response.data.result.process.total
          this.page.current = response.data.result.process.current_page
          this.page.size = response.data.result.process.per_page
        } else {
          this.$message.error(response.data.result)
        }
      })
    },
    handleCurrentChange(v) {
      processPage(v).then(response => {
        const items = response.data.result.process.data
        this.list = items.map(v => {
          return v
        })
        this.page.current = response.data.result.process.current_page
      })
    },
    handleAddSubmit() {
      processAdd(this.add).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
          this.$refs['dialogForm'].resetFields()
          this.resetFields()
          this.dialogVisible = false
          this.init()
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleEditSubmit() {
      processEdit(this.id, this.add).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
          this.$refs['dialogForm'].resetFields()
          this.resetFields()
          this.dialogVisible = false
          this.init()
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleSubMit() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            this.handleAddSubmit()
          } else {
            this.handleEditSubmit()
          }
        }
      })
    },
    handleEdit(id) {
      this.edit = true
      processEditGet(id).then(response => {
        if (response.data.errorCode === 0) {
          this.add.cmd = response.data.result.command
          this.add.desc = response.data.result.desc
          this.add.intval = response.data.result.interval
          this.add.arguments = response.data.result.arguments
          this.add.name = response.data.result.title
          this.id = response.data.result.id
          this.dialogVisible = true
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleInitDialog() {
      this.$refs['dialogForm'].resetFields()
      this.resetFields()
    },
    resetFields() {
      this.id = ''
      this.add.name = ''
      this.add.desc = ''
      this.add.cmd = ''
      this.add.intval = ''
    },
    handleDelte(id) {
      const state = confirm('确认删除该进程吗？')
      if (state) {
        processDelete(id).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            this.init()
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    },
    handleToggoleState(id, index, v) {
      const state = confirm('确认更改进程状态？')
      if (state) {
        processToggle(id, v).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            this.list[index].status = response.data.result.status
            this.list[index].last_start_at = response.data.result.last_start_at
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    },
    handleClickInfo(id) {
      processInfo(id).then(response => {
        if (response.data.errorCode === 0) {
          this.info.arguments = response.data.result.arguments
          this.info.command = response.data.result.command
          this.info.desc = response.data.result.desc
          this.info.error_info = response.data.result.error_info
          this.info.interval = response.data.result.interval
          this.info.last_start_at = response.data.result.last_start_at
          this.info.status = response.data.result.status
          this.info.title = response.data.result.title
          this.info.create_at = response.data.result.create_at
          this.dialogInfo = true
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

